import React, { useEffect, useState } from 'react';
import { Descriptions, Card, Badge, Button, Image } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import { getHospitalDetail } from '@/api/hospital/hospitalList';
import { IBookingRule, IHospitalItem } from '@/api/hospital/model/hospitalListType';

export default function HospitalDetail() {
    let {id} = useParams() // 获取页面参数
    // 使用路由函数
    const navigate = useNavigate()
    // 定义状态
    let [bookingRule, setBookingRule] = useState<IBookingRule>()
    let [hospital, setHospital] = useState<IHospitalItem>()

    const getList = async () => {
      let {bookingRule,hospital} = await getHospitalDetail(id as string)
      // console.log(hospital);
      // console.log(bookingRule);     
      setBookingRule(bookingRule)
      setHospital(hospital)
    }
    useEffect(() => {
       
      getList()
    }, [])
  
  // 定义描述项
  const itemTemp1 =(data:IHospitalItem) => [
    {
      label: '医院名称',
      children: data?.hosname || '未知',
      span: 1
    },
    {
      label: '医院logo',
      children: data?.logoData &&<Image width={100} src={'data:image/jpeg;base64,'+ data?.logoData}></Image>,
    },
    {
      label: '医院编码',
      children: data?.hoscode,
    },
    {
      label: '医院地址',
      children:  data?.param.fullAddress,
    },
    {
      label: '坐车路线',
      children: data?.route,
      span: 2,
    },
    {
      label: '医院简介',
      children: data?.intro || '',
      span: 2,
    }
  ];
  // 根据医院数据动态渲染描述项
  const items1 = itemTemp1(hospital as IHospitalItem);
  const itemTemp2 =(data:IBookingRule)=> [
    {
      label: '预约周期',
      children: data?.cycle,
      span: 1
    },
    {
      label: '放号时间',
      children: data?.releaseTime,
    },
    {
      label: '停挂时间',
      children: data?.quitTime,
    },
    {
      label: '退号时间',
      children: data?.quitDay,
    },
    {
      label: '预约规则',
      children: data?.rule.map((item,index) => (
        <div key={index}>{item}</div>
      )),
      span: 2,
    }
  ];
  const items2 = itemTemp2(bookingRule as IBookingRule);
  return (
    <div>
      <Card>
        {/* column 默认一行显示几列（一列包含属性和值） */}
        <Descriptions title="基本信息" labelStyle={{width: 120,textAlign:'center'}} column={2} bordered>
          {items1.map(item => (
            <Descriptions.Item key={item.label} {...item} />
          ))}
        </Descriptions>
        <Descriptions title="预约规则信息" labelStyle={{width: 120,textAlign:'center'}} column={2} bordered>
          {items2.map(item => (
            <Descriptions.Item key={item.label} {...item} />
          ))}
        </Descriptions>
        <Button className='mar-t bor-r' onClick={() => {navigate(-1)}}> 返回</Button>
      </Card>
    </div>
  );
}
